<template>
	<view>
		<view class="search_center">
			<!-- 左边输入框内容开始 -->
			<view class="search_input">
				<icon type="search"></icon>
				<input placeholder="输入商品名" v-model="inputVal" @input="handleInput"></input>
			</view>
			<view class="search_btn" @tap="handleSearch">搜索</view>
			<!-- 右边按钮结束 -->
		</view>
		<!-- 搜索列表开始 -->
		<GoodsList :goods_list="goods_list" />
		<!-- 搜索列表结束 -->
	</view>
</template>

<script>
	import GoodsList from "../../components/searchList.vue"
	export default {
		components: {
			GoodsList
		},

		data() {
			return {
				timer: null, // 防抖
				inputVal: "", 
				goods_list: [
			
				]
			}
		},
		methods: {
			handleInput: function(e) {
				let inputVal = e.target.value;
				// 防抖
				if (this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.getGoodList(inputVal);
					this.timer = null;
				}, 1000)
			},
			handleSearch: function() {

				//判断输入商品名称是否为空
				if (!this.inputVal) {
					uni.showToast({
						title: '输入商品名称不能为空',
						icon: "none"
					})
					return false;
				}
				this.getGoodList(this.inputVal);

			},
			getGoodList: async function(inputVal) {
				//请求后台拿数据
				const goods_list = await this.$request({
					url: "goods/qsearch",
					data: {
						query: inputVal
					}
				})
				this.goods_list = goods_list.message;
			},
		}
	}
</script>

<style lang="less">
	.search_center {
		margin-bottom: 15rpx;
	}

	.search_center .search_input {
		margin-top: 15rpx;
		margin-left: 18rpx;
		width: 599rpx;
		height: 61rpx;
		border-radius: 27rpx;
		display: flex;
		align-items: center;
		background-color: #e7e7e7;
		float: left;
	}

	.search_center .search_btn {
		float: left;
		width: 101rpx;
		height: 61rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #EA4350;
		border-radius: 8rpx;
		margin-top: 15rpx;
		margin-left: 15rpx;
		color: white;
		font-size: 25rpx;
	}
</style>